<template>
	<!-- <el-scrollbar class="archives_areainfo_info"> -->
	<div class="archives_areainfo_info">
		<div>
			<Table
				:tableData="topTable.tableData"
				:tableHead="topTable.tableHead"
				:isUseSlot="false"
				:page="listQueryt.page"
				:limit="listQueryt.limit"
				v-loading="listLoading"
				:tableHeight="'calc(100vh - 400px)'"
			>
				<template slot="tool" slot-scope="{ data }">
					<el-button
						style="padding:3px;"
						icon="el-icon-document"
						@click="handleEdit(data.row, false)"
						type="text"
						>编辑</el-button
					>
					<el-button
						style="color:red;padding:3px;"
						icon="el-icon-delete"
						@click="delet1(data.row)"
						type="text"
						>删除</el-button
					>
				</template>
			</Table>
			<Pagination
				v-show="topTable.total > 0"
				:total="topTable.total"
				:page.sync="listQueryt.page"
				:limit.sync="listQueryt.limit"
				@pagination="getList"
			></Pagination>
			<Table
				:tableData="bottomTable.tableData"
				:tableHead="bottomTable.tableHead"
				:isUseSlot="false"
				:page="listQueryb.page"
				:limit="listQueryb.limit"
				v-loading="listLoading"
				:tableHeight="'calc(100vh - 400px)'"
			>
				<template slot="tool" slot-scope="{ data }">
					<el-button
						style="padding:3px;"
						icon="el-icon-document"
						@click="handleEdit(data.row, true)"
						type="text"
						>编辑</el-button
					>
					<el-button
						style="color:red;padding:3px;"
						icon="el-icon-delete"
						@click="delet2(data.row)"
						type="text"
						>删除</el-button
					>
				</template>
			</Table>
			<Pagination
				v-show="bottomTable.total > 0"
				:total="bottomTable.total"
				:page.sync="listQueryb.page"
				:limit.sync="listQueryb.limit"
				@pagination="getListb"
			></Pagination>
		</div>
		<form-tem
			:info="{ title: '场所信息', width: '1000px', top: '5%', col: 6 }"
			:formList="formList"
			@submit="submit"
			@close="closeDialog"
			ref="formDelg"
			@change="change"
			v-model="dialogFormVisible"
		>
			<template v-if="!isShowCar">
				<el-input
					style="margin: 0 2%"
					placeholder="搜索"
					suffix-icon="el-icon-search"
					v-model="search"
					autocomplete="off"
				></el-input>
				<div
					style="width: 100%;height: 200px;border-radius: 5px;background:#eee;margin:10px 5px"
				>
					<Map
						baiduMapWidth="200px"
						:mapKeyword="search"
						:center="center"
						@searchcomplete="searchcomplete"
					/>
				</div>
			</template>
		</form-tem>
	</div>

	<!-- </el-scrollbar> -->
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import formTem from "@/template/form.temp";
import Table from "@/components/Table";
import {
	getAreaList,
	insertAreaInfo,
	getAreaInfo,
	updateAreaInfo,
	insertCar,
	updateCar
} from "@/api/RCIM/RCIM-archives";
import Map from "@/components/ly_components/map/Map";
import { getSiteType, getArea } from "@/api/RCIM/RCIM-select";
import control from "../mixins/control";
import { cloneDeep } from "lodash";
import { deepRecursiveGetStringIdLine, deepClone } from "@/utils";
import { validateFormNumber } from "@/utils/validateForm";
import { deleteCar, deleteAreaInfo } from "@/api/RCIM/RCIM-delet";
export default {
	components: {
		Table,
		Pagination,
		formTem,
		Map
	},
	mixins: [control],
	name: "archives_areainfo_info",
	data() {
		return {
			search: "",
			editInfo: {},
			topTable: {
				tableHead: [
					{
						prop: "placeName",
						label: "场所名称",
						align: "left"
					},
					{
						prop: "area",
						label: "所属区域",
						align: "center"
					},
					{
						prop: "placeAddress",
						label: "场所地址",
						align: "left"
					},
					{
						prop: "latAndlng",
						label: "经纬度",
						align: "center"
					},
					{
						prop: "operate",
						label: "操作",
						align: "center"
					}
				],
				tableData: [],
				total: 1
			},
			bottomTable: {
				tableData: [],
				tableHead: [
					{
						prop: "licenseNumber",
						label: "车牌号",
						align: "center"
					},
					{
						prop: "driver",
						label: "驾驶员",
						align: "center"
					},
					{
						prop: "operate",
						label: "操作",
						align: "center"
					}
				],
				total: 1
			},
			listQueryt: {
				page: 1,
				limit: 10,
				id: ""
			},
			listQueryb: {
				page: 1,
				limit: 10,
				id: ""
			},
			listLoading: false,
			// dialogFormVisible: false,
			formListCar: [
				{
					width: "49.9%"
				},
				{
					type: "input",
					label: "车牌号",
					width: "50%",
					placeholder: "",
					maxlength: "20",
					showWordLimit: true,
					moduleKey: "licenseNumber",
					// defaultValue: "的撒旦撒旦",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入车牌号",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "input",
					label: "驾驶员",
					width: "50%",
					placeholder: "",
					maxlength: "10",
					showWordLimit: true,
					moduleKey: "driver",
					// defaultValue: "的撒旦撒旦",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入驾驶员",
								trigger: "blur"
							}
						];
					}
				}
			],
			formListPlace: [
				{
					width: "49.9%"
				},
				{
					type: "input",
					label: "场所名称",
					width: "50%",
					placeholder: "",
					maxlength: "50",
					showWordLimit: true,
					moduleKey: "placeName",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入场所名称",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "input",
					label: "场所电子围栏半径(米)",
					labelWidth: "180px",
					width: "50%",
					placeholder: "",
					moduleKey: "placeRadius",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入场所电子围栏半径",
								trigger: "blur"
							},
							{ validator: validateFormNumber, trigger: "blur" }
						];
					}
				},
				{
					type: "cascader",
					label: "所属区域",
					width: "50%",
					placeholder: "请选择",
					moduleKey: "area",
					options: [],
					fetchTimes: Infinity,
					props: {
						checkStrictly: true
					},
					fetch: getArea,
					validate: function() {
						return [
							{
								required: true,
								message: "请选择所属区域",
								trigger: "change"
							}
						];
					}
				},
				{
					type: "input",
					label: "经纬度",
					labelWidth: "80px",
					width: "28.75%",
					maxlength: "20",
					showWordLimit: true,
					placeholder: "",
					moduleKey: "lng",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入经纬度",
								trigger: "change"
							}
						];
					}
				},
				{
					type: "input",
					label: "",
					labelWidth: "20px",
					width: "21.20%",
					placeholder: "",
					maxlength: "20",
					showWordLimit: true,
					moduleKey: "lat",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入经纬度",
								trigger: "change"
							}
						];
					}
				},
				{
					type: "input",
					label: "场所地址",
					width: "50%",
					placeholder: "",
					maxlength: "80",
					showWordLimit: true,
					moduleKey: "placeAddress"
				}
			],
			formList: [],
			formListdef: [
				{
					list: [
						{
							type: "select",
							label: "场所类型",
							width: "50%",
							placeholder: "请选择",
							moduleKey: "placeType",
							children: "option",
							options: [],
							fetch: getSiteType,
							validate: function() {
								return [
									{
										required: true,
										message: "请选择场所类型",
										trigger: "change"
									}
								];
							}
						}
					],
					title: ""
				}
			],
			isShowCar: false,
			center: {}
		};
	},
	mounted() {
		// 企业id赋值
		this.listQueryt.id = this.entData.id;
		this.listQueryb.id = this.entData.id;

		this.getList();
		this.getListb();
	},
	methods: {
		/**
		 * @desc 删除场地数据
		 * @param {Object} row 表格行数据
		 */
		delet1(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					deleteAreaInfo(row.id).then(res => {
						if (res.code === 200) {
							this.getList();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		/**
		 * @desc 删除车辆数据
		 * @param {Object} row 表格行数据
		 */
		delet2(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					deleteCar(row.id).then(res => {
						if (res.code === 200) {
							this.getListb();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		/**
		 * @desc 获取场地表格数据
		 */
		async getList() {
			this.listLoading = true;
			const { data } = await getAreaList(this.listQueryt);
			this.total = data.total;
			this.topTable.tableData = data.areaList;
			// this.bottomTable.tableData = data.carList;
			this.listLoading = false;
		},
		/**
		 * @desc 获取车辆表格数据
		 */
		async getListb() {
			this.listLoading = true;
			const { data } = await getAreaList(this.listQueryb);
			this.total = data.total;
			// this.topTable.tableData = data.areaList;
			this.bottomTable.tableData = data.carList;
			this.listLoading = false;
		},
		/**
		 * @desc 编辑表格数据
		 * @param {Object} row 表格行数据
		 * @param {Boolean} isCar 判断是否为车辆
		 */
		async handleEdit(row, isCar) {
			this.$refs.formDelg.openDialog();
			this.editInfo = row;
			this.showList(isCar, "edit");
			const { data } = await getAreaInfo({ id: row.id });
			// this.formList = this.handleInfo(data);
			// setTimeout(() => {
			const parent = this.$refs.formDelg.getFormEle().forEach(item => {
				console.log(item, data.data);
				if (isCar) {
					row.placeType = "5c5060e7-e3bf-4c70-bd23-fbcb1edd1062";
					item[0].setDefaultValue(row);
				} else {
					item[0].getFormList("area").then(res => {
						const dataValue = data.data;
						dataValue.area = deepRecursiveGetStringIdLine(
							res,
							dataValue.area,
							"value"
						);
						item[0].setDefaultValue(dataValue);
					});
				}
			});
			this.center = { lng: data.data.lng, lat: data.data.lat };
			// },1000)
			// console.log(this.formList);
		},
		/**
		 * @desc 显示弹窗数据详情
		 */
		initShowDetail(val) {
				this.editInfo = {};
				let copyData = cloneDeep(this.formListdef);
				this.$nextTick(() => {
					copyData[0].list.push(...this.formListPlace);
					this.formList = copyData;
				});
		},
		/**
		 * @desc 关闭弹窗
		 */
		closeDialog() {
			this.editInfo = {};
			let copyData = cloneDeep(this.formListdef);
			this.$nextTick(() => {
				copyData[0].list.push(...this.formListPlace);
				this.formList = cloneDeep(copyData);
			});
		},
		/**
		 * @desc 显示数据表格
		 */
		showList(judge, edit) {
			let copyData = cloneDeep(this.formListdef);
			// debugger;
			if (edit === "edit") {
				// this.$set(copyData[0].list[0], "disabled", true);
				copyData[0].list[0].disabled = true
			}
			console.log(copyData[0].list);
			if (judge) {
				this.isShowCar = true;
				copyData[0].list.push(...this.formListCar);
			} else {
				this.isShowCar = false;
				copyData[0].list.push(...this.formListPlace);
			}
			this.formList = copyData;
		},
		/**
		 * @desc 显示数据表格
		 */
		change(...param) {
			if (param[0] !== "placeType") return;
			this.showList(param[1] === "5c5060e7-e3bf-4c70-bd23-fbcb1edd1062");

			console.log(param);
		},
		// closeDialog() {
		// 	this.dialogFormVisible = false;
		// },
		formateForm(formData) {
			const result = cloneDeep(formData);
			result.area = result.area.pop();
			result.enterpriseId = this.entData.id;
			return result;
		},
		/**
		 * @desc 修改、新增车辆信息
		 * @param {Object} formData 提交的数据
		 */
		submitCar(formData) {
			formData.enterpriseId = this.entData.id;
			if (this.editInfo.id) {
				formData.id = this.editInfo.id;
				// 调用修改接口
				updateCar(formData).then(res => {
					this.$refs.formDelg.closeDialog();
					this.getListb();
					if (res.code === 200) {
						return this.$message({
							type: "success",
							message: "修改成功"
						});
					}
					return this.$message({
						type: "success",
						message: "修改失败"
					});
				});
			} else {
				// 调用新增接口
				insertCar(formData).then(res => {
					this.$refs.formDelg.closeDialog();
					this.getListb();
					if (res.code === 200) {
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			}
		},
		/**
		 * @desc 修改、新增场地信息
		 * @param {Object} formData 提交的数据
		 */
		submit(formData) {
			if (this.isShowCar) {
				let param = {
					placeType: formData.placeType,
					licenseNumber: formData.licenseNumber,
					driver: formData.driver
				};
				this.submitCar(param);
				return;
			}
			let params = this.formateForm(formData);

			if (this.editInfo.id) {
				// 调用修改接口
				// params.enterpriseId = this.editInfo.id;
				updateAreaInfo(params).then(res => {
					this.$refs.formDelg.closeDialog();
					this.getList();
					if (res.code === 200) {
						this.dialogFormVisible = false;
						return this.$message({
							type: "success",
							message: "修改成功"
						});
					}
					return this.$message({
						type: "success",
						message: "修改失败"
					});
				});
			} else {
				// 调用新增接口
				insertAreaInfo(params).then(res => {
					this.$refs.formDelg.closeDialog();
					this.getList();
					if (res.code === 200) {
						this.dialogFormVisible = false;
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			}
		},
		searchcomplete(result) {
			console.log(result, "result");
			// 搜索
			const searchResult =
				result && ((result.Br && result.Br[0] && result.Br[0].point) || ( result.Ir && result.Ir[0] && result.Ir[0].point ));
			if (searchResult) {
				this.$refs.formDelg.getFormEle().forEach(item => {
					item[0].setDefaultValue(searchResult);
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.archives_areainfo_info {
	height: calc(100vh - 244px);
	/deep/ {
		.el-scrollbar__wrap {
			overflow-x: auto;
		}
		.pagination-container {
			margin-top: 0;
		}
	}
}
</style>
